<template>
    <el-form :model="formData" label-width="auto" style="max-width: 600px" ref="form1Ref" :rules="rules">

        <el-form-item label="名称" prop="name">
          <el-input v-model="formData.name" />
        </el-form-item>
        <el-form-item label="图片" prop="img">
          <Tuku v-model="formData.img" />
        </el-form-item>
        <el-form-item label="父类">
           
            <CategoryTree v-model="formData.parentId" ></CategoryTree>
           
        </el-form-item>
        <el-form-item label="状态" > 
          <Enum v-model="formData.status" enumName="CategoryStatus"></Enum>
        </el-form-item>
        <el-form-item label="排序" >
          <el-input-number :min="0" v-model="formData.seq" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submitForm()">保存</el-button>
          <el-button @click="resetForm()">重置</el-button>
        </el-form-item>
      </el-form>
</template>
<script setup lang="ts">
import Tuku from '@/components/Tuku.vue';
import Enum from '@/components/Enum.vue';
import { onMounted, reactive, ref } from 'vue';
import categoryApi from '@/api/categoryApi';
import { ElMessage } from 'element-plus';
import CategoryTree from '@/components/CategoryTree.vue';
import {useRouter,useRoute} from 'vue-router'
const router =useRouter()
const route = useRoute()

const form1Ref = ref()
const formData = reactive({
  id:0,
  name: '',
  img: '',
  status:0,
  parentId:0,
  seq:1
})



onMounted(()=>{
    formData.id = route.query.id===undefined?0:Number(route.query.id)
})

const callApi = ()=>{
    categoryApi.select.call({id:formData.id}).then((res:any)=>{
        res=res.items[0]
        formData.name = res.name
        formData.img = res.img
        formData.status = res.status
        formData.parentId = res.parentId
        formData.seq = res.seq
    })
}


const rules = {
     name: [
    { required: true, message: '请输入名称', trigger: 'blur' }
    ],
    
}
const submit = () => {
  categoryApi.update.call(formData).then(()=>{
    ElMessage.success("更新成功")
  })
  
}
const submitForm = async () => {

    await form1Ref.value.validate((valid: any, fields: any) => {
        if (valid) {
            submit()
        }
    })
}
const resetForm = () => {
  
}
</script>
